import React, { Component } from "react";
import "./index.scss";
import Topic from "./Topic";
import List from "./List";
import Recommend from "./Recommend";
import { connect } from "react-redux";
import { getHomeInfo, toggleTopShow } from "./store/actions";
class Home extends Component {
  handleScroll = () => {
    window.scrollTo(0, 0);
  };
  render() {
    return (
      <div className="Home">
        <div className="home-left">
          <img
            className="banner-img"
            alt=""
            src="//upload.jianshu.io/admin_banners/web_images/4318/60781ff21df1d1b03f5f8459e4a1983c009175a5.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"
          />
          <Topic />
          <List />
        </div>
        <div className="home-right">
          <Recommend></Recommend>
        </div>
        {this.props.showScroll ? (
          <div className="backTop" onClick={this.handleScroll}>回到顶部</div>
        ) : (
          ""
        )}
      </div>
    );
  }

  componentDidMount() {
    this.props.changeHomeData();
    window.addEventListener("scroll", this.props.ShowScroll);
  }
  // componentWillUnmount(){
  //   window.removeEventListener("scroll",this.props.showScroll)
  // }
}

const mapState = (state) => ({
  showScroll: state.getIn(["home", "showScroll"]),
});

const mapDispatch = (dispatch) => ({
  changeHomeData() {
    console.log("mount");
    dispatch(getHomeInfo());
  },
  ShowScroll() {
    if (document.documentElement.scrollTop > 0) {
      dispatch(toggleTopShow(true));
    } else {
      dispatch(toggleTopShow(false));
    }
  },
});

export default connect(mapState, mapDispatch)(Home);
